<template>
    <div class="todo-list-container">
      <!-- 1. 输入框组件 -->
      <router-link to="/Profile" class="nav-link">个人资料</router-link>
      <TodoInput @add-todo="addTodo" />
      
      <!-- 2. 任务列表 -->
      <div class="todo-items">
        <TodoItem
          v-for="todo in filteredTodos"
          :key="todo.id"
          :todo="todo"
          @toggle="toggleTodo"
          @edit="openEditModal"
          @remove="removeTodo"
        />
      </div>
      
      <!-- 3. 过滤组件 -->
      <TodoFilter
        :remaining="remaining"
        :visibility="visibility"
        @set-filter="setFilter"
      />
      
      <!-- 4. 编辑模态框 -->
      <TodoModal
        v-if="editingTodo"
        :todo="editingTodo"
        @save="saveEdit"
        @close="closeModal"
      />
    </div>
  </template>
  
  <script>
  import TodoInput from '@/components/TodoInput.vue'
  import TodoItem from '@/components/TodoItem.vue'
  import TodoFilter from '@/components/TodoFilter.vue'
  import TodoModal from '@/components/TodoModal.vue'
  
  export default {
    name: 'TodoListPage',
    components: {
      TodoInput,
      TodoItem,
      TodoFilter,
      TodoModal
    },

    created() {
        if (!this.$store.state.auth.isAuthenticated) {
            this.$router.push('/login')
        }
    },
    data() {
      return {
        todos: JSON.parse(localStorage.getItem('vue-todos')) || [],
        visibility: 'all',
        editingTodo: null
      }
    },
    computed: {
      filteredTodos() {
        switch (this.visibility) {
          case 'active': return this.todos.filter(t => !t.completed)
          case 'completed': return this.todos.filter(t => t.completed)
          default: return this.todos
        }
      },
      remaining() {
        return this.todos.filter(todo => !todo.completed).length
      }
    },
    methods: {
      addTodo(text) {
        this.todos.push({
          id: Date.now(),
          text,
          completed: false
        })
        this.saveToLocal()
      },
      toggleTodo(id) {
        const todo = this.todos.find(t => t.id === id)
        if (todo) {
          todo.completed = !todo.completed
          this.saveToLocal()
        }
      },
      removeTodo(id) {
        this.todos = this.todos.filter(t => t.id !== id)
        this.saveToLocal()
      },
      openEditModal(todo) {
        this.editingTodo = { ...todo }
      },
      saveEdit(newText) {
        const todo = this.todos.find(t => t.id === this.editingTodo.id)
        if (todo) {
          todo.text = newText
          this.saveToLocal()
        }
        this.closeModal()
      },
      closeModal() {
        this.editingTodo = null
      },
      setFilter(filter) {
        this.visibility = filter
      },
      saveToLocal() {
        localStorage.setItem('vue-todos', JSON.stringify(this.todos))
      }
    }
  }
  </script>
  
  <style scoped>
  .todo-list-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .todo-items {
    margin: 20px 0;
  }
  </style>